<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:c="http://java.sun.com/jsp/jstl/core" >
      
   <head>
  </head> 
    <ui:composition template="/templates/default/template.xhtml">
    	<ui:define name="body">
    	<h:panelGrid columns="1" style="margin-left:20px;width:100%">
    	<!--  tieu de -->
    	<h:panelGrid columns="3" styleClass="columPanelbaritemTitle">
			<h:graphicImage value="/templates/default/images/left-heading_01.jpg" style="margin-left:-4px;margin-bottom:0px"></h:graphicImage>
	  		<h:outputText value="Tạo chức năng mới" styleClass="panelbaritemTitle"></h:outputText>
			<h:graphicImage value="/templates/default/images/left-heading_03.jpg"></h:graphicImage>
	  	</h:panelGrid>
	  	<!-- ket thuc tieu de -->
		<!-- phan noi dung phia duoi -->
    	<h:panelGrid columns="1" styleClass="panelGridBody">
    			<!-- Bat dau noi dung ben trong -->
		  <h:form id="hForm">
		    <rich:panel style="background:#FFFFFF">
		    	<h:panelGrid columns="2" style="margin-left:10px;">
		    		<h:outputText></h:outputText>
					<h:outputText id="idError" value="#{function.error}" style=" color: red;" escape="false"></h:outputText>
					
					<h:outputText value="ID chức năng" styleClass="Text"></h:outputText>
		    		<h:inputText value="#{function.id}" styleClass="Input" disabled="true"></h:inputText>
		    		<h:outputText value="Tên chức năng"  styleClass="Text" ></h:outputText>
		    		<h:inputText value="#{function.name}" styleClass="Input"></h:inputText>
		    		
		    		<h:outputText value="Tên thư mục chứa" styleClass="Text"></h:outputText>
		    		<h:inputText value="#{function.folder}" styleClass="Input"></h:inputText>
		    		<h:outputText value="Thuộc nhóm" styleClass="Text"></h:outputText>
						<h:selectOneMenu value="#{function.group}" styleClass="InputControl">
							<f:selectItems value="#{itemCollection.groups}"/>
						</h:selectOneMenu>
						
					<h:outputText value="Thuộc loại" styleClass="Text"></h:outputText>
						<h:selectOneMenu value="#{function.cat}" styleClass="InputControl">
							<f:selectItems value="#{itemCollection.cats}"/>
						</h:selectOneMenu>
		    	
		    	<!-- action -->	
		    	</h:panelGrid>
			    	<h:panelGrid columns="3" style="margin-left:120px;margin-top:10px">
			    	<a4j:commandButton  value="Lưu" styleClass="Button" action="#{function.saveEdit}"
			    	onclick="if(!confirm('Bạn có muốn lưu không?')) {return false;}" reRender="idError"></a4j:commandButton>
			        <a4j:commandButton  value="Hủy bỏ" styleClass="Button" action="#{function.cancelEdit}"></a4j:commandButton>
			       </h:panelGrid>
		       <!-- ket thuc action -->
			 </rich:panel>
		  </h:form>
			<!-- Ket thuc phan noi dung ben trong -->
			
			<!-- Bat dau table -->
			<h:form>
			
					<h:dataTable id="list" value="#{itemCollection.dataOfFuncs}" var="func" 
								columnClasses="column" headerClass="TableHeader" rowClasses="ROW1,ROW2" footerClass="TableFooter" 
					       style="width:100%; margin-left:0px;margin-top: 10px" cellspacing="1px;" rows="10">
						<h:column >
							<f:facet name="header">
								<h:outputText value="STT"></h:outputText>
							</f:facet>
							<h:outputText value="#{func.stt}"></h:outputText>
							<f:facet name="footer">
								<rich:spacer></rich:spacer>
							</f:facet>
						</h:column>
						<h:column>
							<f:facet name="header">
								<h:outputText value="Nhóm"></h:outputText>
							</f:facet>
							<h:outputText value="#{func.group}"></h:outputText>
						</h:column>
						<h:column>
							<f:facet name="header">
								<h:outputText value="Loại"></h:outputText>
							</f:facet>
							<h:outputText value="#{func.cat}"></h:outputText>
						</h:column>
						<h:column>
							<f:facet name="header">
								<h:outputText value="Tên chức năng" ></h:outputText>
							</f:facet>
							<h:outputText value="#{func.name}"></h:outputText>
						</h:column>
						<h:column>
							<f:facet name="header">
								<h:outputText value="Thư mục chứa"></h:outputText>
							</f:facet>
							 <h:outputText value="#{func.folder}"></h:outputText>
						</h:column>
						<h:column>
							<f:facet name="header">
								<h:outputText value="Xóa"></h:outputText>
							</f:facet>
							<a4j:commandLink action="#{function.delete}"  onclick="if(!confirm('Bạn có muốn xóa chức năng #{func.name} không?')) 
							 								{return false;}" reRender="idError">
							 	<h:graphicImage value="./images/icoDelete.gif">
							 	</h:graphicImage>
							 	<f:param value="#{func.id}" name="id"/>
							 	<f:param value="#{func.name}" name="name"/>
							 </a4j:commandLink>
						</h:column>
						<h:column>
							<f:facet name="header">
								<h:outputText value="Sữa chữa"></h:outputText>
							</f:facet>
							<a4j:commandLink action="#{function.edit}">
							 	<h:graphicImage value="./images/icoEdit.gif"></h:graphicImage>
							 	<f:param value="#{func.id}" name="id"/>
							 	<f:param value="#{func.name}" name="name"/>
							 	<f:param value="#{func.folder}" name="folder"/>
							 	<f:param value="#{func.groupid}" name="groupid"/>
							 	<f:param value="#{func.catid}" name="catid"/>
							 </a4j:commandLink>
						</h:column>
					</h:dataTable>
						<!-- phan trang -->
						<rich:datascroller align="right"  for="list" maxPages="5" />
						<!-- ket thuc phan trang -->
				</h:form>
				<!--  Ket thuc table -->
    		</h:panelGrid>   
    		<!-- Ket thuc phan noi dung phia duoi --> 					
    	</h:panelGrid>
    	</ui:define>
    </ui:composition> 
    
</html>







